<template>
    <van-nav-bar left-arrow fixed @click-left="onBack">

        <template #title>
            <van-search v-model="search" @search="onSearch" />

        </template>
    </van-nav-bar>

    <form action="/">

    </form>
    <div style="height: 50px;"></div>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="index in 3" :title="title[index - 1]">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="item in list" :key="item.id"
                            :to="{ path: '/product/product/info', query: { id: item.id } }">
                            <div class="thumb">
                                <van-image :src="item.thumbs_cdn[0]" />
                            </div>
                            <p>{{ item.name }}</p>
                            <p style="color: red; font-size: 15px">￥{{ item.price }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-list>
            </van-pull-refresh>
        </van-tab>

    </van-tabs>
    <Footer />
</template>
<script setup>
import Footer from 'components/common/Footer.vue';

import { createApp, ref, onMounted, reactive, getCurrentInstance } from 'vue';

import { Tab, Tabs } from 'vant';

const { proxy } = getCurrentInstance();
const app = createApp();
app.use(Tab);
app.use(Tabs);
var search = ref(proxy.$route.query.search ?? '');
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const typeid = ref(proxy.$route.query.id);
const list = reactive([]);
const listCount = ref(0);
const page = ref(1);
const limit = ref(10);
const active = ref(0);
const title = ['综合', '库存', '价格'];
const value = ref('');
const name = ref('');
const pstatus = ref(false);
const sstatus = ref(false);



// 下拉刷新
const onRefresh = () => {
    refreshing.value = true;
    page.value = 1;
    list.length = 0;
    loading.value = true;

    onLoad();
}

// 上拉加载
const onLoad = () => {
    if (!refreshing.value && list.length < listCount.value) {
        page.value = page.value + 1;
    }

    if (refreshing.value) {
        setTimeout(() => {
            refreshing.value = false;
        }, 1500);
    }

    setTimeout(getProductData, 1500);
}

const onClickTab = async (data) => {
    name.value = data.name;
    if (name.value == 2 && pstatus.value == false) {
        pstatus.value = true;
    }else if(name.value == 2 && pstatus.value == true){
        pstatus.value = false;
    }else if (name.value == 1 && sstatus.value == false) {
        sstatus.value = true;
    }else if(name.value == 1 && sstatus.value == true){
        sstatus.value = false;
    }
    onRefresh()
};


const getProductData = async () => {
    // let name1 = onClickTab;
    
    // console.log(name1);
    let data = {
        typeid:typeid.value,
        page: page.value,
        limit: limit.value,
        ids:name.value,
        pstatus:pstatus.value,
        sstatus:sstatus.value,
        search:search.value
    }
    console.log(data);
    let result = await proxy.$Api.listIndex(data);
    // console.log(result.data);
    if (result && result.code === 1) {
        finished.value = false;
        loading.value = false;

        listCount.value = result.data.count;
        list.push(...result.data.list);

        if (list.length === listCount.value) {
            finished.value = true;
            loading.value = false;
            return;
        }
    } else {
        finished.value = true;

        return;
    }
}

const onSearch = () => {
    onRefresh()
}

const onBack = () => {
    proxy.$router.back();
}
</script>
<style>
@import url('/public/assets/css/style.css');
</style>